<template>
  <div>
    <!-- 宝箱的海报图 -->
    <Overlay
      v-for="(item, index) in popenActList"
      :show="item.overlayShow"
      z-index="250"
      style="
        background-color: #00000073;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
      "
      :key="index"
    >
      <div class="wrapper df ai-center jc-center">
        <div class="act-img-fraem">
          <img class="treasureChestPoster-img" :src="item.banner" @click="gotoPage(item)" />
          <div class="cloture-frame df ai-center jc-center">
            <div class="cloture-img df ai-center jc-center" @click="closurePoPen(item, index)">
              <img src="@/image/new_img/home/Close_bai.png" />
            </div>
          </div>
        </div>
      </div>
    </Overlay>
  </div>
</template>
<script setup lang="ts">
import { Overlay } from "vant";
import { ref, onMounted, PropType } from "vue";
import { useRouter } from "vue-router";
import moment from "moment";
const props = defineProps({
  popBanner: {
    type: Array as PropType<
      Array<{
        banner: string;
        bannerPosition: number;
        hyperlinkName: string;
        hyperlinkType: number;
        id: number;
        jumpWay: number;
        rankId: number;
        remark: string;
        intervalTime: number;
      }>
    >,
    default: () => [],
  },
});
const router = useRouter();
const popenActList: any = ref([]);
// onActivated(() => {
//   if (popenActList.value.length > 0) {
//     popenActList.value.map(item => {
//       if (item.intervalTime == 0) {
//         item.overlayShow = true;
//       }
//     });
//   }
// });
onMounted(() => {
  if (props.popBanner.length > 0) {
    popenActList.value = props.popBanner;
    props.popBanner.map((item, index) => {
      item["overlayShow"] = false;
      item["zindex"] = 250 + index;
      item["popupTime"] = moment().format("YYYY-MM-DD HH:mm:ss");
      item["initType"] = 0;
    });

    popenActList.value.map(item => {
      if (item.intervalTime == 0) {
        if (item.initType == 0) {
          console.log("ntervalTime == 0会进来吗");
          item.overlayShow = true;
        }
      } else {
        item.initType = 1;
        item.overlayShow = true;
        item["intervalTime"] = setInterval(() => {
          item.overlayShow = true;
          console.log("会出来吗", item);
        }, item.intervalTime * 60 * 60 * 1000);
      }
    });
  }

  // }
});
//关闭页面
const closurePoPen = (_item, index) => {
  popenActList.value[index].overlayShow = false;
};
//跳转页面
const gotoPage = item => {
  if (item.jumpWay === 1) {
    //内跳
    if (item.hyperlinkName && item.hyperlinkName !== "") {
      router.push(item.hyperlinkName);
    }
  } else {
    //外跳
    window.open(item.hyperlinkName);
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #ffffff;
}
.act-img-fraem {
  width: 560px;
  height: auto;
}
.treasureChestPoster-img {
  width: 560px;
  height: auto;
}
.cloture-frame {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: auto;
}
.cloture-img {
  width: 66px;
  height: 66px;
  background-color: #000000a6;
  border-radius: 50%;
  img {
    width: 42px;
    height: 42px;
  }
}
</style>
